<template>
  <transition name="slide">
    <music-list :title="title" :bg-image="bgImage" :songs="songs"></music-list>
  </transition>
</template>

<script type="text/ecmascript-6">
  import MusicList from '../../components/music-list/music-list.vue'
  import {mapGetters} from 'vuex';
  import {getSingerDetail} from '../../api/singer'
  import{ERR_OK} from '../../api/config'
  import {createSong} from '../../common/js/song'

  export default{
    computed: {
      title(){
        return this.singer.name
      },
      bgImage(){
          return this.singer.avatar
      },
      ...mapGetters([
        'singer'
      ])
    },
    data(){
      return{
          songs:[]
      }
    },
    created(){
        this._getDetail();
      console.log(this.singer)
    },
    methods:{
        _getDetail(){
            if(!this.singer.id){
                this.$router.push('/singer')
                return
            }
            getSingerDetail(this.singer.id).then((res)=>{
                if(res.code===ERR_OK){
                    this.songs=this._normalizeSongs(res.data.list);
                    console.log(this.songs);
                }
            })
        },
        _normalizeSongs(list){
            let ret=[];
            list.forEach((item)=>{
                let {musicData}=item;
                if(musicData.songid&&musicData.albummid){
                    ret.push(createSong(musicData))
                }
            })
          return ret;
        }
    },
    components:{
      MusicList
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
 @import "~common/stylus/variable"

  .singer-detail
    postion:fixed
    background-color black
    z-index:100
    top:0
</style>
